<template>
  <div class="klinepage">
    <mt-header fixed :title="(select.name || '- -') + (select.name_code || '- -')"
      style="color: #fff;background-color: #000;">
      <!-- <router-link to="/index" slot="left"><mt-button icon="back"></mt-button></router-link> -->
    </mt-header>
    <div class="selectList">
      <div style="width: 50%;" class="selectList_left">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
          <div :class="(ticket[select.code2] && ticket[select.code2].wave) > 0 ? 'up' : 'down'"
            style="width: 50%;text-align: center;box-sizing: border-box;padding-left: 10px;font-size: 18px;">
            {{ ((ticket[select.code2] && ticket[select.code2].price) || 0).toFixed(2) || '- -' }}
          </div>
          <div :class="(ticket[select.code2] && ticket[select.code2].wave) > 0 ? 'up' : 'down'"
            style="width: 50%;text-align: center;">
            {{
              (ticket[select.code2] && ((ticket[select.code2] && ticket[select.code2].price) - (ticket[select.code2] && ticket[select.code2].close) || 0).toFixed(2)) ||
                '- -'
            }}
            <br />
            {{ Number((ticket[select.code2] && ticket[select.code2].wave) || 0).toFixed(2) || '- -' }}%
          </div>
        </div>
        <div style="box-sizing: border-box;padding-left: 10px;">{{$t('hodings')}}
          {{ ((ticket[select.code2] && ticket[select.code2].position) || 0).toFixed(0) || '- -' }}</div>
      </div>
      <div style="width: 50%;" class="selectList_right">
        <div>
          {{$t('klinepage.sale')}}
          <span class="up">{{ ((ticket[select.code2] && ticket[select.code2].ask) || 0).toFixed(2) || '- -' }}</span>
        </div>
        <div>
          {{$t('klinepage.buy')}}
          <span class="up">{{ ((ticket[select.code2] && ticket[select.code2].bid) || 0).toFixed(2) || '- -' }}</span>
        </div>
        <div>
          {{$t('klinepage.highest')}}
          <span class="up">{{ ((ticket[select.code2] && ticket[select.code2].high) || 0).toFixed(2) || '- -' }}</span>
        </div>
        <div>
          {{$t('klinepage.lowest')}}
          <span class="down">{{ ((ticket[select.code2] && ticket[select.code2].low) || 0).toFixed(2) || '- -' }}</span>
        </div>
        <div>
          {{$t('klinepage.yesend')}}
          <span>{{ ((ticket[select.code2] && ticket[select.code2].close) || 0).toFixed(2) || '- -' }}</span>
        </div>
        <div>
          {{$t('klinepage.todayopen')}}
          <span class="up">{{ ((ticket[select.code2] && ticket[select.code2].open) || 0).toFixed(2) || '- -' }}</span>
        </div>
      </div>
    </div>
    <div class="kline_tablist">
      <div @click="timetab = 'fenshi'" :class="timetab == 'fenshi' ? 'active' : ''">{{$t('klinepage.timeshare')}}</div>
      <div @click="timetab = '6000'" :class="timetab == '6000' ? 'active' : ''">1{{$t('klinepage.min')}}</div>
      <!-- <div @click="timetab = '18000'" :class="timetab == '18000' ? 'active' : ''">3{{$t('klinepage.min')}}</div> -->
      <div @click="timetab = '30000'" :class="timetab == '30000' ? 'active' : ''">5{{$t('klinepage.min')}}</div>
      <div @click="timetab = '90000'" :class="timetab == '90000' ? 'active' : ''">15{{$t('klinepage.min')}}</div>
      <div @click="timetab = '180000'" :class="timetab == '180000' ? 'active' : ''">30{{$t('klinepage.min')}}</div>
      <div @click="timetab = '3600000'" :class="timetab == '3600000' ? 'active' : ''">1h</div>
      <div @click="timetab = '7200000'" :class="timetab == '7200000' ? 'active' : ''">2h</div>
      <div @click="timetab = '86400000'" :class="timetab == '86400000' ? 'active' : ''">1{{$t('klinepage.day')}}</div>
      <div @click="timetab = 'mounth'" :class="timetab == 'mounth' ? 'active' : ''">1{{$t('klinepage.month')}}</div>
      <div @click="timetab = 'year'" :class="timetab == 'year' ? 'active' : ''">1{{$t('klinepage.year')}}</div>
    </div>
    <div id="line_border">
      <div class="loding">{{$t('loading')}}</div>
    </div>
    <div class="transactionList">
      <div class="transaction_btn" @click="transbtn">
        <img src="../assets/jiesuan.png" style="width: 30px;height: auto;" />
        {{$t('klinepage.deal')}}
      </div>
      <div style="width: 1px;height: 0.9rem;background-color: #868383;"></div>
      <div v-if="!selfcheck" @click="btnlist && selectcheck('add')" class="transaction_btn">{{$t('klinepage.addself')}}
      </div>
      <div v-if="selfcheck" @click="btnlist && selectcheck('dele')" class="transaction_btn">
        <img src="../assets/tianjia.png" style="width: 30px;height: auto;" />
        {{$t('klinepage.delself')}}
      </div>
    </div>
    <div class="commonFooter">
      <commonFooter active='mine'></commonFooter>
    </div>
  </div>
</template>
<script>
  import commonFooter from '@/components/commapp/footer';
  import {
    mapState
  } from 'vuex';
  import echarts from 'echarts';
  import kline from '@/kline/kline.js';
  import tmdata from '@/kline/tmpdata.js';

  export default {
    computed: mapState({
      select: state => state.trade.select /* 当前选中股指 */ ,
      symbol: state => state.trade.symbol /* 全部行情 */ ,
      symbos: state => state.trade.symbos /* 当前页面显示行情 */ ,
      ticket: state => state.trade.ticket /*,,, 推送数据 */ ,
      checkbtn: state => state.checkselect //是否是自选
    }),
    name: 'klinepage',
    components: {
      commonFooter, //  底部导航
    },
    data() {
      return {
        btnlist: true,
        selfcheck: false,
        timetab: null,
        myechart: null,
        klineInterval: null
      };
    },
    mounted() {
      if (this.checkbtn == true) {
        this.selfcheck = true;
      }
      let mychart = document.getElementById('line_border');
      mychart.style.width = $('#line_border').width() + 'px';
      mychart.style.height = $('#line_border').height() + 'px';
      this.myechart = echarts.init(mychart);
      // this.timetab = 'fenshi';
      this.timetab = '6000';
      this.init();

      console.log(this.select)
    },
    beforeDestroy() {
      if (this.klineInterval) {
        clearInterval(this.klineInterval);
      }
      this.klineInterval = null;
    },
    watch: {
      timetab(val) {
        this.init();
      }
    },
    methods: {
      // 交易
      transbtn() {
        if (this.$svcInvoke.config._token) {
          return this.$router.push({
            path: 'transaction'
          });
        } else {
          if (localStorage.getItem('_token')) {
            this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
            return this.$router.push({
              path: 'transaction'
            });
          } else {
            return this.$router.push({
              path: '/'
            });
          }
        }
      },
      // 加入自选
      selectcheck(btnname) {
        var that = this;
        that.btnlist = false;

        if (this.$svcInvoke.config._token) {
          if (btnname == 'add') {
            return that.add();
          } else {
            return that.dele();
          }
        } else {
          if (localStorage.getItem('_token')) {
            this.$svcInvoke.setConf('_token', localStorage.getItem('_token'));
            if (btnname == 'add') {
              return that.add();
            } else {
              return that.dele();
            }
          } else {
            return this.$router.push({
              path: '/'
            });
          }
        }
      },
      init() {
        let that = this;
        clearInterval(that.klineInterval);
        that.klineInterval = null;
        if (that.timetab == 'fenshi') {
          return that.drawfenshi();
        } else {
          return that.drawkline(that.timetab);
        }
      },
      drawkline(range) {
        var that = this;
        that.klineInterval = setInterval(res => {
          that.rkline(this.select.code, range, true);
        }, 1500);
        that.rkline(this.select.code, range);
      },
      drawfenshi() {
        this.klineInterval = setInterval(res => {
          this.rfenshi(this.select.code);
        }, 1500);
        this.rfenshi(this.select.code);
      },
      rfenshi(symbol, time) {
        var that = this;
        symbol = symbol ? symbol : (symbol = that.select.code);
        if (!symbol) {
          symbol = that.select.code;
        }
        this.$get('addons/tf-futures/get-kline/get-line?symbol=' + symbol).then(res => {
          if (res.data[0].length > 0) {
            that.myechart.setOption(kline.initMOption(res.data, 'auto'));
          } else {
            if (that.klineInterval) {
              clearInterval(that.klineInterval);
            }
            that.klineInterval = null;
            that.myechart.setOption(kline.initMOption(tmdata.lindata0, 'auto'));
          }
        });
      },
      rkline(symbol, time, update = false) {
        var that = this;
        symbol = symbol ? symbol : (symbol = that.select.code);
        if (!symbol) {
          symbol = that.select.code;
        }
        this.$get('addons/tf-futures/get-kline/app-kline?symbol=' + symbol + '&range=' + time).then(res => {
          if (res.data.lines.length > 0) {
            if (!update) {
              that.myechart.setOption(kline.initKOption(res.data.lines));
            } else {
              //console.log('updateK线');
              //  更新K线
              var data = kline.splitData(res.data.lines);
              var macd = kline.calcMACD(12, 26, 9, data.datas, 1);
              that.myechart.setOption({
                xAxis: {
                  data: data.times,
                },
                series: [{
                  data: data.datas,
                }]
              });
            }

          } else {
            if (that.klineInterval) {
              clearInterval(that.klineInterval);
            }
            that.klineInterval = null;
            that.myechart.setOption(kline.initKOption(tmdata.knedata0));
          }
        });
      },
      //加入自选
      add() {
        var that = this;
        that.btnlist = false;
        this.$layer.open({
          content: this.$t('klinepage.confirm_addself'),
          btn: [this.$t('confirm'), this.$t('cancel')],
          yes: function() {
            //按钮【按钮一】的回调
            that.$post('addons/tf-futures/self-check/add', {
              symbol_id: that.select.id
            }).then(res => {
              if (res.code == 200) {
                that.btnlist = true;
                that.selfcheck = true;
                that.$layer.closeAll();
                that.$layer.msg(res.message || that.$t('klinepage.addselfed'));
              } else {
                that.$layer.closeAll();
                that.$layer.msg(res.message || that.$t('klinepage.addself_fail'));
              }
            });
          },
          btn2: function() {
            //按钮【按钮二】的回调
            that.btnlist = true;
            that.$layer.closeAll();
            that.$layer.msg(that.$t('canceld'));
          },
          cancel: function() {
            //右上角关闭回调
            that.btnlist = true;
            that.$layer.closeAll();
            that.$layer.msg(that.$t('canceld'));
          }
        });
      },
      //删除自选
      dele() {
        var that = this;
        that.btnlist = false;
        this.$layer.open({
          content: this.$t('klinepage.confirm_delself'),
          btn: [this.$t('confirm'), this.$t('cancel')],
          yes: function() {
            //按钮【按钮一】的回调
            that.$post('addons/tf-futures/self-check/delete-check', {
              symbol_id: that.select.id
            }).then(res => {
              if (res.code == 200) {
                that.btnlist = true;
                that.$layer.closeAll();
                that.selfcheck = false;
                that.$layer.msg(res.message || that.$t('klinepage.delselfed'));
              }
            });
          },
          btn2: function() {
            //按钮【按钮二】的回调
            that.btnlist = true;
            that.$layer.closeAll();
            that.$layer.msg(that.$t('canceld'));
          },
          cancel: function() {
            //右上角关闭回调
            that.btnlist = true;
            that.$layer.closeAll();
            that.$layer.msg(that.$t('canceld'));
          }
        });
      }
    }
  };
</script>
<style scoped>


  .up {
    color: #ff210d;
  }

  .down {
    color: #00dc00;
  }

  .klinepage {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    box-sizing: border-box;
    padding-top: 1rem;
    color: #fff;
  }

  /* 行情显示 */
  .selectList {
    width: 100%;
    height: 3rem;
    border-top: 1px solid #868383;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #868383;
  }

  .selectList .selectList_left {
    box-sizing: border-box;
    height: 100%;
    line-height: 1rem;
  }

  .selectList .selectList_right {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: space-around;
    align-items: center;
  }

  .selectList .selectList_right>div {
    width: 50%;
    height: 1rem;
    line-height: 1rem;
    text-align: left;
    box-sizing: border-box;
    padding-left: 0.1rem;
  }

  /* k线显示按钮 */
  .kline_tablist {
    width: 100%;
    height: 0.8rem;
    overflow-x: auto;
    overflow-y: hidden;
    line-height: 0.8rem;
    background-color: #000000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }

  .kline_tablist>div {
    text-align: center;
    padding: 0px 0.3rem;
    min-width: 1rem;
    font-size: 0.3rem;
    color: #ccd2dc;
  }

  .kline_tablist .active {
    font-size: 0.4rem;
    color: #fff;
  }

  /* k线位置宽度 */
  #line_border {
    width: 100vw;
    height: calc(100vh - 6rem);
    color: #fff;
  }

  .transactionList {
    width: 100%;
    height: 1rem;
    padding-top: 0.2rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #868383;
    padding-bottom: 1.42rem;
  }

  .transactionList .transaction_btn {
    width: 49%;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
